<template>
  <div>
    <div>
      <el-card class="content">
        <el-row>
          <el-col :span="4">
            <span>通知人：</span>
            <el-input
              placeholder="请输入通知人"
              style="width: 180px"
              size="mini"
              clearable
              v-model="query.userName"
            ></el-input>
          </el-col>
          <el-col :span="4">
            <span>通知类型：</span>
            <el-select
              placeholder="请输入通知类型"
              style="width: 180px"
              size="mini"
              clearable
              v-model="query.type"
            >
              <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col>
          <!-- <el-col :span="4">
            <span>监测类型：</span>
            <el-select
              placeholder="请输入监测类型"
              style="width: 180px"
              size="mini"
              clearable
              v-model="query.monitorTypeId"
            >
              <el-option
                v-for="item in stationType"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col> -->
          <el-col :span="6">
            <div class="searchTop">
              <el-button class="black-button" size="small" @click="getSearch"
                >查询</el-button
              >
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="small"
                @click="dialog_flag = true"
                >新增</el-button
              >
            </div>
          </el-col>
        </el-row>
        <p class="bg-purple">预警通知管理列表</p>
        <el-table
          :data="warningList"
          stripe
          size="small"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column label="通知人姓名" prop="userName"></el-table-column>
          <el-table-column
            label="通知人手机号码"
            prop="telephone"
          ></el-table-column>
          <el-table-column
            label="监测类型"
            prop="monitorTypeName"
          ></el-table-column>
          <el-table-column
            label="尾矿库名称"
            prop="tailingPondName"
          ></el-table-column>
          <el-table-column label="通知类型" prop="type">
            <template slot-scope="scope">
              <span v-if="scope.row.type === 0">绝对位移预警</span>
              <span v-if="scope.row.type === 1">相对位移预警</span>
              <span v-if="scope.row.type === 2">设备预警</span>
            </template>
          </el-table-column>
           <el-table-column
            label="预警类型"
            prop="warnLevelName"
          ></el-table-column>
          <el-table-column label="修改时间" prop="updateTime"></el-table-column>
          <el-table-column label="操作" prop="id" width="120px">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="updateWarning(scope.row)"
                >修改</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="delWarning(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[10, 15]"
            :page-size="query.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-row>
      </el-card>
      <!-- 添加 -->
      <el-dialog title="添加预警通知" :visible.sync="dialog_flag" width="25%">
        <el-form
          ref="addWarning"
          label-position="left"
          label-width="120px"
          :model="addWarning"
          :rules="rules"
        >
          <el-form-item label="通知人姓名" prop="userName">
            <el-input
              placeholder="请输入通知人"
              v-model="addWarning.userName"
            ></el-input>
          </el-form-item>
          <el-form-item label="监测类型" prop="monitorTypeId">
            <el-checkbox-group v-model="addWarning.monitorTypeId">
              <el-checkbox
                v-for="item in checkMonitorTypeList"
                :key="item.id"
                :label="item.id"
                :checked="item.ischeck"
                >{{ item.name }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="尾矿库" prop="tailingPondId">
            <el-select
              placeholder="请输入尾矿库名称"
              style="display: flex"
              v-model="addWarning.tailingPondId"
            >
              <el-option
                v-for="item in tailingList"
                :key="item.id"
                :label="item.tailingName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机号" prop="telephone">
            <el-input
              placeholder="请输入手机号"
              v-model="addWarning.telephone"
            ></el-input>
          </el-form-item>
          <el-form-item label="通知类型" prop="type">
            <el-select v-model="addWarning.type" style="display: flex">
              <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="预警类型" prop="warnLevelId">
            <el-checkbox-group v-model="addWarning.warnLevelId">
              <el-checkbox
                v-for="item in checkWarnLevelList"
                :key="item.id"
                :label="item.id"
                :checked="item.ischeck"
                >{{ item.name }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addWarningList">确定</el-button>
            <el-button @click="closeAddWarning">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 修改 -->
      <el-dialog
        title="修改预警通知"
        :visible.sync="editDialog_flag"
        :width="dialogWidth"
      >
        <el-form
          ref="editWarning"
          label-position="left"
          label-width="120px"
          :model="editWarning"
          :rules="rules"
        >
          <el-form-item label="通知人姓名" prop="userName">
            <el-input
              placeholder="请输入通知人"
              v-model="editWarning.userName"
            ></el-input>
          </el-form-item>
          <el-form-item label="监测类型" prop="monitorTypeId">
            <el-checkbox-group v-model="editWarning.monitorTypeId">
              <el-checkbox
                v-for="item in checkMonitorTypeList"
                :key="item.id"
                :label="item.id"
                >{{ item.name }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="尾矿库" prop="tailingPondId">
            <el-select
              placeholder="请输入尾矿库名称"
              style="display: flex"
              v-model="editWarning.tailingPondId"
            >
              <el-option
                v-for="item in tailingList"
                :key="item.id"
                :label="item.tailingName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机号" prop="telephone">
            <el-input
              placeholder="请输入手机号"
              v-model="editWarning.telephone"
              style="display: flex"
            ></el-input>
          </el-form-item>
          <el-form-item label="通知类型" prop="type">
            <el-select v-model="editWarning.type" style="display: flex">
              <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="预警类型" prop="warnLevelId">
            <el-checkbox-group v-model="editWarning.warnLevelId">
              <el-checkbox
                v-for="item in checkWarnLevelList"
                :key="item.id"
                :label="item.id"
                >{{ item.name }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="editWarningList">确定</el-button>
            <el-button @click="closeEditWarning">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import MiddleLabel from "~/components/MiddleLabel";
import axios from "axios";
import {
  getWarningByPage,
  getMonitorTypeList,
  getTailingPondList,
} from "../../../api/api";
export default {
  name: "SurfaceDisplacement",
  components: {
    MiddleLabel,
  },
  data() {
    return {
      index: 0,
      labels: ["预警通知管理"],
      types: [],
      query: {
        page: 1,
        pagesize: 10,
        userName: "",
        type: null,
      },
      total: null,
      // 所有预警通知管理信息
      warningList: [],
      // 监测类型列表
      stationType: [],
      // 尾矿库列表
      tailingList: [],
      // 通知类型列表
      typeList: [
        { id: 0, name: "绝对位移预警" },
        { id: 1, name: "相对位移预警" },
        { id: 2, name: "设备预警" },
      ],
      addWarning: {
        userName: "",
        monitorTypeId: [],
        tailingPondId: null,
        telephone: null,
        type: null,
        unitId: sessionStorage.getItem("unitId"),
        warnLevelId: [],
      },
      dialog_flag: false,
      editWarning: {
        id: null,
        userName: "",
        monitorTypeId: [],
        tailingPondId: null,
        telephone: null,
        type: null,
        unitId: sessionStorage.getItem("unitId"),
        warnLevelId: [],
      },
      editDialog_flag: false,
      dialogWidth: "450px",
      rules: {
        userName: [
          { required: true, message: "请输入通知人姓名", trigger: "blur" },
        ],
        unitName: [
          { required: true, message: "请输入通知人部门名称", trigger: "blur" },
        ],
        monitorTypeId: [
          {
            required: true,
            message: "请至少选择一个监测类型",
            trigger: "change",
          },
        ],
        tailingPondId: [
          { required: true, message: "请选择尾矿库名称", trigger: "change" },
        ],
        telephone: [
          { required: true, validator: this.checkPhone, trigger: "blur" },
        ],
        type: [
          { required: true, message: "请选择通知类型", trigger: "change" },
        ],
        warnLevelId: [
          {
            required: true,
            message: "请至少选择一个监测类型",
            trigger: "change",
          },
        ],
      },
      checkMonitorTypeList: [
        { id: "1", name: "干滩", ischeck: false },
        { id: "2", name: "库水位", ischeck: false },
        { id: "3", name: "表面位移", ischeck: false },
        { id: "4", name: "内部位移", ischeck: false },
        { id: "5", name: "浸润线", ischeck: false },
        { id: "6", name: "降雨量", ischeck: false },
        { id: "7", name: "视频", ischeck: false },
      ],
      checkWarnLevelList: [
        { id: "1", name: "一级预警", ischeck: false },
        { id: "2", name: "二级预警", ischeck: false },
        { id: "3", name: "三级预警", ischeck: false },
      ],
    };
  },
  created() {
    this.getWaringSearchPage();
    this.getTypeList();
    this.getTaillist();
    this.getTailingList();
  },
  methods: {
    // 自定义手机验证规则
    checkPhone(rule, value, callback) {
      if (!value) {
        return callback(new Error("不能为空"));
      } else {
        const reg = /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8]|8[0-9]|9[1,8,9])\d{8}$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    },
    //分页查询
    async getWaringSearchPage() {
      const res = await getWarningByPage({
        pageCount: this.query.page,
        pageSize: this.query.pagesize,
        unitId: sessionStorage.getItem("unitId"),
        userName: this.query.userName,
        type: this.query.type,
      });
      console.log(res);
      this.warningList = res.parameter.list;
      this.total = res.parameter.total;
    },
    handleSizeChange(val) {
      this.query.pagesize = val;
      this.getWaringSearchPage();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.getWaringSearchPage();
    },
    // 查询
    async getSearch() {
      const res = await getWarningByPage({
        pageCount: this.query.page,
        pageSize: this.query.pagesize,
        unitId: sessionStorage.getItem("unitId"),
        userName: this.query.userName,
        monitorTypeId: this.query.monitorTypeId,
        type: this.query.type,
      });
      if (res.resultCode == "200") {
        this.$message.success({
          message: "成功查询数据",
          offset: 400,
          duration: 1000,
        });
        this.warningList = res.parameter.list;
        this.total = res.parameter.total;
      }
      if (res.resultCode !== "200") {
        this.$message({
          message: "暂无数据",
          offset: 400,
          duration: 1000,
        });
        this.warningList = [];
      }
    },
    // 监测类型列表
    async getTypeList() {
      const res = await getMonitorTypeList();
      console.log(res);
      this.stationType = res.parameter;
    },
    async getTaillist() {
      const res = await getTailingPondList();
      console.log(res);
    },
    //查询尾矿库列表
    async getTailingList() {
      const res = await getTailingPondList({
        unitId: sessionStorage.getItem("unitId"),
      });
      this.tailingList = res.parameter;
    },
    //新增
    addWarningList() {
      this.$refs.addWarning.validate((val) => {
        if (val) {
          const formData = new FormData();
          for (const [key, value] of Object.entries(this.addWarning)) {
            formData.append(key, value);
          }
          axios({
            method: "post",
            url: "/warningNotice/addWarningNotice",
            data: formData,
          }).then((res) => {
            if (res.data.resultCode == "200") {
              this.$message.success({
                message: "新增成功",
                offset: 400,
                duration: 1000,
              });
              this.getWaringSearchPage();
            } else if (res.data.resultCode == "400") {
              this.$message.error({
                message: "新增失败",
                offset: 400,
                duration: 1000,
              });
            }
            this.dialog_flag = false;
          });
        } else {
          this.$message.error({
            message: "请完成表单项",
            offset: 400,
            duration: 1000,
          });
        }
      });
      this.$refs.addWarning.resetFields();
    },
    closeAddWarning() {
      this.dialog_flag = false;
      this.$refs.addWarning.resetFields();
    },
    // 将数据回显
    updateWarning(row) {
      console.log(row);
      this.editWarning.id = row.id;
      this.editWarning.monitorTypeId = row.monitorTypeId.split(",");
      this.editWarning.tailingPondId = row.tailingPondId;
      this.editWarning.telephone = row.telephone;
      this.editWarning.type = row.type;
      this.editWarning.unitId = row.unitId;
      this.editWarning.userName = row.userName;
      this.editWarning.warnLevelId = row.warnLevelId.split(",");
      this.editDialog_flag = true;
    },
    // 修改信息
    editWarningList() {
      this.$refs.editWarning.validate((val) => {
        if (val) {
          const data = {
            id: this.editWarning.id,
            monitorTypeId: this.editWarning.monitorTypeId,
            tailingPondId: this.editWarning.tailingPondId,
            telephone: this.editWarning.telephone,
            type: this.editWarning.type,
            unitId: this.editWarning.unitId,
            userName: this.editWarning.userName,
            warnLevelId: this.editWarning.warnLevelId,
          };
          const formData = new FormData();
          for (const [key, value] of Object.entries(data)) {
            formData.append(key, value);
          }
          axios({
            method: "post",
            url: "/warningNotice/updateWarningNotice",
            data: formData,
          }).then((res) => {
            console.log(res);
            if (res.data.resultCode == 200) {
              this.$message.success({
                message: "修改成功",
                offset: 400,
                duration: 1000,
              });
              this.getWaringSearchPage();
            } else if (res.data.resultCode == "400") {
              this.$message.error({
                message: "修改失败",
                offset: 400,
                duration: 1000,
              });
            }
            this.editDialog_flag = false;
          });
        } else {
          this.$message.error({
            message: "请完成表单",
            offset: 400,
            duration: 1000,
          });
        }
        this.$refs.editWarning.resetFields();
      });
    },
    closeEditWarning() {
      this.editDialog_flag = false;
      this.$refs.editWarning.resetFields();
    },
    //删除
    delWarning(id) {
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        axios({
          method: "get",
          url: "/warningNotice/deleteWarningNotice/" + `${id}`,
        })
          .then((res) => {
            console.log(res);
            if (res.data.resultCode == "200") {
              this.$message.success({
                message: "删除成功",
                offset: 400,
                duration: 1000,
              });
              this.getWaringSearchPage();
            } else {
              this.$message.error({
                message: "删除失败",
                offset: 400,
                duration: 1000,
              });
            }
          })
          .catch(() => {
            this.$message.info({
              message: "已取消删除",
              offset: 400,
              duration: 1000,
            });
          });
      });
    },

    setDialogWidth() {
      var val = document.body.clientWidth;
      const def = 450; // 默认宽度
      if (val < def) {
        this.dialogWidth = "100%";
      } else {
        this.dialogWidth = def + "px";
      }
    },
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.setDialogWidth();
      })();
    };
  },
};
</script>

<style scoped>
.content {
  height: 87vh;
  overflow: auto;
}
.el-button {
  margin-bottom: 8px;
  font-size: 14px;
}
.black-button {
  background-color: black;
  color: white;
}
.bg-purple {
  background: #d3dce6;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  padding-left: 10px;
}
.searchTop {
  margin-top: -5px;
}
.el-table {
  display: block;
  height: 67.2vh;
  overflow-y: auto;
  margin-bottom: 15px;
}
.el-table::before {
  z-index: inherit;
}
</style>